<template>
  <div>
    <div class="sx">
      <Query
        v-if="searchStatus"
        :from.sync="from"
        :mr="{ label: '角色名称', value: 'rolename' }"
        @search="search"
      ></Query>
    </div>
    <div class="sx">
      <QueryC
      :left="{x3:false,x4:false,x1:true,x2:true,x:true}"
        @refresh="search"
        :searchStatus.sync="searchStatus"
        :from.sync="from"
        :x="true"
        :x1="true"
      ></QueryC>
    </div>
    <div class="sx">
      <TableSun
        @delCli="delsCli"
        :pictLoading="pictLoading"
        :fontArr="['角色名称', '备注', '创建时间']"
        :sunArr="['rolename', 'remark', 'createTime']"
        :tableData="datas"
      >
        <el-table-column label="是否启用" width="180">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="true"
              :inactive-value="false"
            >
            </el-switch>
          </template>
        </el-table-column>
      </TableSun>
    </div>
    <div class="sx"><Fy @change="changeFY" :pading="pading"></Fy></div>
  </div>
</template>

<script>
import Query from "@/components/common/query.vue";
import QueryC from "@/components/common/queryC.vue";
import TableSun from "@/components/common/tableSun.vue";
import Fy from "@/components/common/fy.vue";
import { getlist, del, update, add } from "./api";
export default {
  components: { Query, QueryC, Fy, TableSun },
  data() {
    return {
      from: { name: "" },
      datas: [],
      pading: {
        total: 100,
        currentPage: 1,
        pageSize: 10,
      },
      pictLoading: true,
      searchStatus: true,
    };
  },
  created() {
    this.lists();
  },
  methods: {
    search() {
      this.pading.currentPage = 1;
      this.lists();
    },
    delsCli(row) {
      this.$confirm("此操作将删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.dels(row.id);
        })
        .catch(() => {});
    },
    async lists() {
      this.pictLoading = true;
      let a = await getlist({ ...this.from, ...this.pading });
      if (a.code == 1000) {
        this.datas = a.data.records;
        this.pading.total = a.data.total;
      } else {
        this.$message({
          showClose: true,
          message: a.data,
          type: "warning",
        });
      }
      this.pictLoading = false;
    },
    async updates() {
      let a = await update();
      if (a.code == 1000) {
        this.$message({
          showClose: true,
          message: a.msg,
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: a.data,
          type: "warning",
        });
      }
      this.lists();
    },
    async adds() {
      let a = await add();
      if (a.code == 1000) {
        this.$message({
          showClose: true,
          message: a.msg,
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: a.data,
          type: "warning",
        });
      }
      this.lists();
    },
    async dels(id) {
      let a = await del(id);
      if (a.code == 1000) {
        this.$message({
          showClose: true,
          message: a.msg,
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: a.data,
          type: "warning",
        });
      }
      this.lists();
    },
    changeFY(val) {
      this.pading = { ...this.pading, ...val };
      this.lists();
    },
  },
};
</script>

<style></style>
